<template>
    <div>
        <div class="file-upload-wrap">
            <Upload
                    :action="uploadFileUrl"
                    :headers="accessToken"
                    :on-success="handleSuccess"
                    :on-error="handleError"
                    :format="format"
                    :accept="accept"
                    :max-size="maxSize * 1024"
                    :on-format-error="handleFormatError"
                    :on-exceeded-size="handleMaxSize"
                    :before-upload="beforeUpload"
                    :show-upload-list="false"
                    class="file-upload"
                    v-show="showUpload"
            >
                <Button
                        :loading="loading"
                        :type="type"
                        :ghost="ghost"
                        :shape="shape"
                        :size="size"
                        :disabled="disabled"
                        :icon="icon"
                >{{ text }}
                </Button
                >
            </Upload>
            <Tooltip transfer :content="title" placement="top">
                <a @click="download">{{ currentValue.name }}</a>
            </Tooltip>
        </div>
    </div>
</template>

<script>
    import {uploadFile} from "@/api/index";

    export default {
        name: "fileUpload",
        props: {
            value: Object,
            size: String,
            type: String,
            ghost: {
                type: Boolean,
                default: false,
            },
            disabled: {
                type: Boolean,
                default: false,
            },
            shape: String,
            icon: {
                type: String,
                default: "ios-cloud-upload-outline",
            },
            text: {
                type: String,
                default: "上传文件",
            },
            maxSize: {
                type: Number,
                default: 5,
            },
            accept: String,
            showUpload: {
                type: Boolean,
                default: true,
            },
        },
        computed: {
            format() {
                if (this.accept) {
                    let format = [];
                    this.accept.split(",").forEach((e) => {
                        format.push(e.replace(".", "").replace(" ", ""));
                    });
                    return format;
                } else {
                    return [];
                }
            },
        },
        data() {
            return {
                accessToken: {},
                title: "点击下载",
                currentValue: this.value,
                loading: false,
                uploadFileUrl: uploadFile,
            };
        },
        methods: {
            init() {
                this.accessToken = {
                    accessToken: this.getStore("accessToken"),
                };
            },
            download() {
                if (!this.currentValue.url) {
                    this.$Message.error("无效的链接");
                    return;
                }
                window.open(
                    this.currentValue.url +
                    "?attname=&response-content-type=application/octet-stream&filename=" +
                    this.currentValue.name
                );
            },
            handleFormatError(file) {
                this.loading = false;
                this.$Notice.warning({
                    title: "不支持的文件格式",
                    desc:
                        "所选文件‘ " +
                        file.name +
                        " ’格式不正确, 请选择 " +
                        this.accept +
                        " 格式文件",
                });
            },
            handleMaxSize(file) {
                this.loading = false;
                this.$Notice.warning({
                    title: "文件大小过大",
                    desc:
                        "所选文件‘ " +
                        file.name +
                        " ’大小过大, 不得超过 " +
                        this.maxSize +
                        "M.",
                });
            },
            beforeUpload() {
                this.loading = true;
                return true;
            },
            handleSuccess(res, file) {
                this.loading = false;
                if (res.status==200) {
                    this.currentValue = {
                        url: res.data,
                        name: file.name,
                        size: file.size,
                    };
                    this.title =
                        "点击下载(" + ((file.size * 1.0) / (1024 * 1024)).toFixed(2) + " MB)";
                    this.$emit("input", this.currentValue);
                    this.$emit("on-change", this.currentValue);
                } else {
                    this.$Message.error(res.message);
                }
            },
            handleError(error, file, fileList) {
                this.loading = false;
                this.$Message.error(error.toString());
            },
            handleChange(v) {
                this.$emit("input", this.currentValue);
                this.$emit("on-change", this.currentValue);
            },
            setCurrentValue(value) {
                if (value === this.currentValue) {
                    return;
                }
                this.currentValue = value;
                if (this.currentValue.size) {
                    this.title =
                        "点击下载(" +
                        ((this.currentValue.size * 1.0) / (1024 * 1024)).toFixed(2) +
                        " MB)";
                } else {
                    this.title = "点击下载";
                }
                this.$emit("on-change", this.currentValue);
            },
        },
        watch: {
            value(val) {
                this.setCurrentValue(val);
            },
        },
        mounted() {
            this.init();
        },
    };
</script>

<style lang="less" scoped>
    .file-upload-wrap {
        display: flex;
        align-items: center;

        .file-upload {
            display: inline-block;
            margin-right: 10px;
        }
    }
</style>

